<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
  <title>木群生日快乐</title>

  <script src="./js/babylon.2.4.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/game.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/math.js"></script>
  <script src="./js/formation.js"></script>
  <script src="./js/animation.js"></script>
  <script src="./js/particle.js"></script>
  <link href="./css/index.css" rel="stylesheet" type="text/css" media="all">
  <script>
    var game;
    var formationType = 0;
    window.addEventListener('DOMContentLoaded', function() {

      var canvas = document.getElementById('renderCanvas');
      var engine = new BABYLON.Engine(canvas, true);

      engine.displayLoadingUI();
      setTimeout(function () {

        game = createGame(engine);
        startCamera(game.picArray);

        //添加声音
        var hasSoundLoaded = false;
        var hasParticleLoaded = false;
        var atmosphere = new BABYLON.Sound("Ambient", "sounds/background.mp3", game.scene, function(){
          hasSoundLoaded = true;
            if(hasParticleLoaded == true){
              engine.hideLoadingUI();
              actionTimer();
            }
          },
          {
            loop: true,
            autoplay: true
          }
        );

        loadParticle(game.scene);

        hasParticleLoaded = true;
        if(hasSoundLoaded == true){
          engine.hideLoadingUI();
          actionTimer();
        }

      }, 1000);

      window.addEventListener('resize', function() {
        game.engine.resize();
      });

    });
  </script>

  <script>
    var mesh_index = 0
    function hello(){
      var type = 0;
      if(mesh_index%5 == 4){
        type = 1;
      }

      cameraTo(game.camera, game.picArray[mesh_index], type);
      mesh_index++;
      if(mesh_index == 144){
        mesh_index = 0;
      }
    }

    //定时事件
    function actionTimer(){
      var t2 = window.setInterval("hello()",8000);
    }
  </script>

</head>

<body>
  <canvas id="renderCanvas"></canvas>
  <div style="position:absolute; top:5px; left:5px;">
    <!--<input type="button" onclick="startAnimation()" value="变换矩阵" />-->
  </div> </body>

</html>
